<template>
  <div>
    <head-top :headTitle="headTitle"></head-top>
    <section>
      <mt-field class="mtInput" label="用户名" placeholder="请输真实姓名" v-model="username"></mt-field>
      <mt-field class="mtInput" label="手机号" placeholder="请输入手机号" type="tel"
        v-model="mobile"
      ></mt-field>
      <mt-field class="mtInput" label="手机验证码" size="normal" placeholder="请输入验证码"
        v-model="mobilevalicode"
      >
        <mt-button :class="{'buttonTime' : !changeValiButton}" type="primary" size="normal" @click.native="getMobileCode"
          plain
        >
          <span v-if="changeValiButton">{{valiButton}}</span>
          <span v-else>{{minutes}} : {{seconds}}</span>
        </mt-button>
      </mt-field>
      <mt-field class="mtInput" v-if="errTime" label="验证码" v-model="valicode">
        <img src="" height="45px" width="100px">
      </mt-field>
      <mt-button class="mtInput" type="primary" size="large" @click.native="doRegister">提交注册</mt-button>
    </section>



    <!-- 注册页面 
    <section style="padding-top:4rem" class="login-wrap">
      <input type="text" placeholder="用户名：" class="input_tip" v-model="username">
      <input type="text" placeholder="手机号：" class="input_tip" v-model="mobile">
      <input type="text" placeholder="身份证号：" class="input_tip" v-model="userid">
      <div><input type="text" placeholder="执业证号：" class="input_tip" v-model="zyzh"></div> 备
      <div v-show="errTime"><input type="text" placeholder="验证码：" class="input_tip" v-model="valicode"><input type="text" class="input_tip" v-model="valicodeback"><span>输错超过3次，请输入验证码</span></div> 
      <input type="text" placeholder="手机验证码：" class="input_tip" v-model="mobilevalicode"><input @click="getMobileCode" value="获取短信验证码" type="button"/>
      <input type="button" value="提交注册" class="input_search" @click="doRegister"/>
    </section>
     隐藏的提示页面 -->
    <section>
    </section>
  </div>
</template>

<script>
import headTop from '~/components/pagetwo/headTop';

export default {
  layout: 'default', // 加载跳转页面模板
  data() {
    return {
      // 对用户输入的每一个注册信息，都要进行正则表达式校验
      ts: this.newStore(),
      headTitle: '医生注册',
      title: '医生注册',
      username: '',
      mobile: '',
      userid: '',
      zyzh: '', // 备用
      valicode: '', // 用户提交的验证码
      mobilevalicode: '', // 用户提交的手机验证码
      errTime: false,
      valicodeback: '', // 服务返回的验证码，VUE转为图片
      code: '',
      extReturn: '', // 验证是否当前手机
    };
  },
  mounted() {
    // 获取code
    this.code = `${sessionStorage.getItem('code')}`;
  },
  created() {
    this.$root.showfooter = false;
  },
  destroyed() {
    this.$root.showfooter = true;
  },
  components: {
    headTop,
  },
  methods: {
    // 获取code
    getUrlParam(name) { // ---返回的地址列表中获取CODE, name="code"
      const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
      const r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 提交注册
    doRegister() {
      // this.$messagebox(`注册页看是否登录页的code传递过来：${this.code}`);
      this.spost(this.ts, '/doctor/WeixinLogin.lg', {
        code: this.code,
        reqType: 'register',
        RYBID: 'DOCTOR',
        DATA: JSON.stringify({ // 前端要对输入的注册信息使用正则表达式进行校验，空或者非法字符禁止提交
          username: this.username,
          mobile: this.mobile,
          userid: this.userid,
          valicode: this.valicode,
          mobilevalicode: this.mobilevalicode,
          extReturn: this.extReturn,
          domainname: `${sessionStorage.getItem('hospitalDomainname')}`,
        }),
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        // alert(`JSON.stringify(ts.d.errcode):    ${JSON.stringify(ts.d.errcode)}`);
        if (ts.d.errcode == '200') {
          // 医生端注册时，不要自动转登录，注册后跳转到登录页面时，重新登录系统
          // sessionStorage.setItem('rybToken', ts.d.rybToken);
          // sessionStorage.setItem('userInfo', ts.d.userInfo);
          // sessionStorage.setItem('QrCodeTicketUrl', ts.d.QrCodeTicketUrl);
          window.location.href = `https://${sessionStorage.getItem('hospitalDomainname')}/medicys/`;
        } else if (ts.d.errcode == '514') {
          this.$messagebox('提示',`${ts.d.errmsg}`); // 注册超时, 码错误
          window.location.href = `https://${sessionStorage.getItem('hospitalDomainname')}/medicys/login`;
        } else {
          // 发布到项目中时使用自定义的弹窗
          this.$messagebox('提示',`注册失败：${ts.d.errmsg}`);
          // 如果注册连续错误三次要输入验证码
          if (ts.d.errTime > 3) {
            this.errTime = true;
            this.getCode();
          }
        }
      });
    },
    // 获取验证码, 当 errTime > 3 时调用
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击图片更新
    getCode() {
      this.spost(this.ts, '/doctor/WeixinLogin.lg', {
        reqType: 'getCode',
        RYBID: 'DOCTOR',
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        this.valicodeback = ts.d.valicode;
      });
    },
    // 获取短信验证码
    // 要求，当用户点击获取短信验证码后，页面自动计时，半小时内“获取”按扭不可用，并显示倒计时时间样式,时限取消后点击更新
    getMobileCode() {
      this.spost(this.ts, '/doctor/WeixinLogin.lg', {
        reqType: 'getMobileCode',
        RYBID: 'DOCTOR',
        mobile: this.mobile,
        DATA: `${sessionStorage.getItem('hospitalDomainname')}`, // 医院域名
      }).then((ts) => {
        // alert(JSON.stringify(ts.d));
        if (ts.d.errCode == '200') {
          this.$messagebox('提示','验证码已经发送到您的手机上，请在5分钟内输入验证码'); // 发布到项目中时使用自定义的弹窗
          this.extReturn = ts.d.extReturn.ttid;
        } else if (ts.d.errCode == '514') {
          this.$messagebox('提示',`${ts.d.errMessage}`); // 发布到项目中时使用自定义的弹窗
        } else if (ts.d.errCode == '515') {
          this.$messagebox('提示','非法操作'); // 发布到项目中时使用自定义的弹窗
        } else {
          this.$messagebox('提示',`短信服务异常:   ${ts.d.errMessage}`);
        }
      });
    },
  },

};
</script>
<style>
.mtInput{
  margin-bottom: .5rem;
}
.login-wrap{text-align:center;}
    input{display:block; width:90%; height:40px; line-height:20px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #ccc; padding:10px; box-sizing:border-box;}
</style>
